<template>
  <div class="main">
    <div class="Breadcrumb">
   
    </div>
    
    <div class="search">
      
      
      <div class="searchicon">
        <el-select
          filterable
					clearable
					remote
          reserve-keyword
          :loading="loading"
          v-model="input"
          :remote-method="remoteMethod"
          placeholder="请输入内容"
          @change="searchTextChange"
        >
        <el-option v-for="item in searchList"
						:key="item.sId"
						:label="item.name"
						:value="item.name"
            >
					</el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" ></el-button>
        <el-button type="primary" @click="addStu">添加项目</el-button>
        <Dialog  ref="stuDialog" :visible="visible" @ok="ok" @cancel="cancel" ></Dialog>
      </div>
    </div>


    <div class="select">
    
      <span>选择班级：</span>
      
      <el-select 
      v-model="value" 
      filterable 
      placeholder="请选择"
      :remote-method="remoteMethod"
      @focus="TextChange"
      clearable
      @change="searchText"
      >
      <el-option  
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item"
        >
        </el-option>
      </el-select>
      
    </div>

    <div class="derive">
      <el-button plain icon="iconfont icon-excel" @click="exportExcel">
        导出excel
        </el-button>
    </div>

    <el-table :data="stuData" border style="width: 100%" v-loading="loading">
      <el-table-column label="头像" width="120">
        <template v-slot="{row}">
          <el-avatar shape="square" size="large" fit="scale-down" :src="row.headimgurl?row.headimgurl : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'">
					</el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="130"
      ></el-table-column>
      <el-table-column prop="degree" label="学历" width="283"></el-table-column>
      <el-table-column prop="class" label="班级" width="282"></el-table-column>
      <el-table-column prop="productUrl" label="项目" width="282"></el-table-column>
      <el-table-column prop="cTime" label="创建时间" width="282"></el-table-column>
      <el-table-column prop="address" label="操作" width="282">
            <template v-slot="{ row }">
						<el-button type="primary" icon="el-icon-view" size="mini" @click="examine(row)">查看</el-button>
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(row)">编辑</el-button>
						<el-button type="primary" icon="el-icon-delete" size="mini" style="background-color:#F56C6C" @click="delStu(row)">删除</el-button>
					</template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      style="text-align:center"
      :pageSize="pageSize"
      @current-change="pageChange"
      hide-on-single-page>
    </el-pagination>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog";
import * as api from "@/api/stu";
import qee from "qf-export-excel";

export default {
  meta:{
      title:'xyxmgl',
      name:'学员项目管理',
      icon:"iconfont icon-shangpinguanli"
  },
  created(){
    // 获取表格数据
    this.getstulist()
  },
  methods:{
    // 搜索栏
    searchTextChange(searchText,count=10,page=1){
      this.loading=true
      api.searchstuApi(searchText,count,page)
      .then(res =>{
        if(res.data.state){
          this.stuData=res.data.data
          this.loading=false
          this.total=res.data.total
          this.pageSize=count
        }
      })
    },
    // 下拉栏获取焦点时发送请求，获取所有的班级
    TextChange(){
      api.getClassApi()
      .then(res =>{
        this.options=res.data.data
      })
    },
    // 点击班级时开始搜索
    searchText(pageSize){
      this.getstulist(undefined,undefined,this.value)
    },
    remoteMethod(query){
      api.searchstuApi(query,null,null)
      .then(res =>{
        this.searchList=res.data.data
      })
    },
    // 点击查看跳转到学员资料页，携带参数过去
    examine(row){
      // console.log(row);
      this.$router.push({path:'/studentmanager/studentprofile',query:{row}})
    },
    // 导出excel
    exportExcel(){
      // 导出的字段有哪些
      let titleList = [{
        title:"头像地址",
        key:"headimgurl"
      },{
        title:"名字",
        key:"name"
      },
      {
        title:"年龄",
        key:"age"
      },
      {
        title:"项目",
        key:"productUrl"
      },]
      qee(titleList,this.stuData,"后台数据")
    },
    // 页码改变的时候
    pageChange(pageSize){
      // 判断页码改变的时候是搜索页还是普通展示页
      if(this.input){
        this.searchTextChange(this.input,undefined,pageSize)
      }else if(this.value){
        this.getstulist(undefined,pageSize,this.value)
      }else{ 
        this.getstulist(undefined,pageSize)
      }
      
    },
    getstulist(count=10,page=1,classes){
      this.loading=true
      api.getstulistApi(count,page,classes)
      .then(res =>{
        if(res.data.state){
          this.stuData=res.data.data
          this.loading=false
          this.total=res.data.total
          this.pageSize=count
        }
      })
    },
    // 编辑
    edit(row){
       this.$refs.stuDialog.stuForm = { ...row };
       this.$refs.stuDialog.title = "编辑学员信息"
       this.$refs.stuDialog.fileList = [{url:row.headimgurl}]
       this.visible=true
       console.log(this.$refs.stuDialog.stuForm);
    },
    delStu(row,pageSize){
      console.log(row.sId);
      this.$confirm("该操作讲永久删除数据,是否继续？","删除提示")
      .then(() =>{
        api.deleteStu(row.sId)
        .then(res =>{
          if(res.data.state){
            this.$message.success("删除成功")
            // 判断时候是搜索出来的数据要删除
            if(this.input){
              this.searchTextChange(this.input)
            }else{ 
              this.getstulist()
            }
          }
        })
      })
      .catch(() =>{
        this.$message.info("已取消删除")
      })
    },
    addStu(){
      // 先清空dialog中的数据
      this.$refs.stuDialog.stuForm = {}
      this.$refs.stuDialog.title = "增加学员信息"
      this.visible=true
    },
    // 点击了dialog确定按钮
    ok(formData){
      this.visible=false
      let dialogTitle = this.$refs.stuDialog.title
      if(dialogTitle === "增加学员信息"){
         api.addStu(formData)
          .then(res =>{
            // console.log(res);
            if(res.data.state){
              // 添加成功
              // 更新列表 
            }
          })  
      }else if(dialogTitle === "编辑学员信息"){
        // 发送编辑请求
        api.editStuApi(formData)
        .then(res =>{
          if(res.data.state){
            this.getstulist()
            this.$message.success("更新成功")
          }
        })
      }
    },
    // 点击了dialog取消按钮
    cancel(){
      this.visible=false
    }
  },
  components: {
    Dialog
  },
  data() {
    return {
        searchList:[],
        input:"",
        total:0,
        pageSize:0,
        visible:false,
        loading:false,
        options: [],
        value: '',
        stuData: [],
    };
  },
};
</script>
<style lang="less" scoped>
#app {
    .layout-container {
      .el-container {
        .is-vertical {
          .el-main {
            .main {
              line-height: 14px;
              font-size: 14px;
              text-align: left;
              .Breadcrumb {
                margin: 20px 0 30px 0;
                  .Breadcrumb__item:nth-of-type(1){
                    font-weight: 900;
                  }
                  .Breadcrumb__item:nth-of-type(1):active{
                    color:skyblue
                  }
                  .Breadcrumb__item:nth-of-type(2){
                    font-weight: 900;
                  }
                  .Breadcrumb__item:nth-of-type(1):hover{
                    cursor: pointer;
                    color:skyblue
                  }
              }
               /deep/ .el-table{
                        .el-table__cell{
                          text-align: center;
                        }
                  }
            /deep/ .search{
              display: flex;
                margin: 20px 0;
                .el-autocomplete{
                  .el-input{
                    width: 300px;
                  }
                }
              }
              .derive{
                margin: 20px 0;
                display: flex;
                justify-content: end;
              }
            }
          }
        }
      }
    }
  
}
</style>